<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      dfafdfdsaf3424fdaf
      <div>
        hello343fdafda
        <div>
          fdafd32134dafd
          <div>fdsafd321dfsaf</div>
        </div>
      </div>
      <!-- 我是注释 -->
    </div>

    <script>
      //我写的
      /* var divs = document.querySelector(".container");
        var nodes = divs.childNodes;
        console.log(nodes);
        //   console.log(nodes[0].nodeValue);
        //   nodes[0].nodeValue = "123";

        var str = nodes[0].nodeValue;
        //   console.log(res);
        var res = str.replace(/\d+/, "*");
        console.log(res);
        nodes[0].nodeValue = res; */

      //需求: 把container 容器里面的所有文本 里的数字换成*
      //需要找到容器里的文本节点
      var containerEle = document.querySelector(".container");

      function compileNode(containerEle) {
        // 获取container 容器里的所有节点；
        var nodes = containerEle.childNodes;
        nodes.forEach(function (node) {
          // console.log(node);
          if (node.nodeType === 3) {
            //选出文本节点
            //   console.log("(" + node.nodeValue + ")");
            //去掉空格
            var reg = /\s+/g;
            var res = node.nodeValue.replace(reg, "");
            //   console.log("(" + res + ")");
            if (res !== "") {
              // console.log(node);
              var reg1 = /\d+/g;
              node.nodeValue = node.nodeValue.replace(reg1, "*");
              console.log(node);
            }
          } else if (node.nodeType === 1) {
            console.log("元素是", node);
            compileNode(node);
          }
        });
      }
      compileNode(containerEle);

      /* 
        难点
        1.正则  \s \d \w  + ? . [0-9] [a-z] ... g i 
        2.递归 : 深拷贝 无限极分类 
        */
    </script>
  </body>
</html>
